/*
 * @Author: your name
 * @Date: 2022-04-29 09:21:37
 * @LastEditTime: 2022-04-29 14:32:12
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \zjzl-web\src\components\SearchTable\mixins\v1\dynamic-table-col.js
 */
import ColumnConfig from "../../../classes/ColumnConfig.js";

/**
 * @author 阮中楠
 * @classdesc 动态表格列数据管理对象
 * @class DynamicTableManager
 */
class DynamicTableManager {
  constructor() {
    /** 被选择的列表值 */
    this.selectedList = [];
    this.fullPropList = [];
  }

  /** 拓展表格配置数组 让来自props的col配置数组拓展成完整配置的数组 保证数据健壮性 */
  extentProps(tableCols = []) {
    this.fullPropList = tableCols.map(
      colConfig => new ColumnConfig(colConfig)
    );
  }

  /** 设置被选择的列表值 */
  setSelectedList() {
    // 筛选过滤全部被预设为 hidden = false 的表列
    this.selectedList = this.fullPropList.filter(
      colConfig => !colConfig.hidden
    );
  }

  /** 重新设置全部可以选择数组 让这些数组全部都配置为可见 */
  resetHidden() {
    // forEach变量的对象 其对象的属性是可以被修改的
    this.fullPropList.forEach(colConfig => (colConfig.hidden = false));
  }

  /** 对外提供的初始化函数 */
  init(tableCols = []) {
    this.extentProps(tableCols);
    this.setSelectedList();
    this.resetHidden();
  }

  /** 动态属性 参与渲染遍历的 表格列配置数组 其本质是对已选择数组的语义化别名命名 */
  get toRenderColsList() {
    return this.selectedList;
  }
}

/** 动态表格列 业务处理逻辑混入对象 即vue格式的对象 */
const dynamicTableCol = {
  data() {
    return {
      // 动态表格处理对象 动态表格处理的业务 均用此对象实现业务
      dynamicTableHandleObj: new DynamicTableManager()
    };
  },

  watch: {
    tableCols: {
      immediate: true,
      deep: true,
      handler(newVal, oldVal) {
        this.dynamicTableHandleObj.init(this.tableCols);
      }
    }
  },

  created() {
    this.dynamicTableHandleObj.init(this.tableCols);
  }
};

export default dynamicTableCol;
